<template>
  <view class="clone">
	  <movable />
    <image :src="currentImages" class="background" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></image>
    <view class="top-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
      <view class="biaoti">探索·发现</view>
      <view class="daohang" @click="ckgd">查看更多</view>
    </view>
    <view class="wenzi-swiper" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
      <!-- <image :src="wenziImage" class="image" style="padding-top: 10rpx"></image> -->
      <textarea class="image" style="padding-top: 10rpx" v-model="textContent" v-if="wenziqr" disabled></textarea>
      <textarea class="image-bai" style="padding-top: 10rpx" v-model="textContent2" v-if="wenziqr2" disabled></textarea>
    </view>

    <z-swiper v-model="list" :options="options" @slideChange="onChange" ref="zSwiper" class="swiper" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
      <!-- z-swiper 组件，可能用于实现轮播效果 -->
      <z-swiper-item :custom-style="{width:'512.46rpx',height:'731.8rpx'}" v-for="(item,index) in list" :key="index">
        <image class="swiper-image" :src="item" mode="aspectFill" @click="handleClick" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
        </image>
      </z-swiper-item>
    </z-swiper>

   <!-- <view class="daohanglogo">
      <image :src="imageUrl + '/xiaoniao.png'" class="daohang-image" @click="tzsy"></image>
    </view> -->
    <view class="jianto">
      <image :src="imageUrl + '/tansuofaxian/tansuofaxianGroup-788.png'" class="image" :class="{ 'arrow-fade': true }"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      wenziqr: true,
      wenziqr2: false,
      imageUrl: this.$imageUrl,
      touchStartX: 0,
      touchStartY: 0,
      startY: 0,
      isTouching: false,
      currentImages: 'https://xnlv.lizxx.com/image/xnlv/static/yunzhanguan/yunzhanguanimage-49603.png',
      wenzi: 'svxzaefxbg',
      textContent: '江河之秘的古老码头，智慧之光悄然闪烁，\n是历史的低语，还是未来的预兆？\n每一步探索，都伴随着疑问的回响。\n这里到底有多少秘密？',
      textContent2: '张谷英村呈龙形格局，神秘而独特。\n此地人才辈出，\n传承着古老的智慧与文化，\n散发着浓厚的历史韵味。',
      isFirstLoad: true,
      options: {
        // 开启循环播放
        loop: 'true',
        // 设置轮播效果为coverflow
        effect: 'coverflow',
        // 使幻灯片居中显示
        centeredSlides: true,
        // 自动调整显示的幻灯片数量
        slidesPerView: 'auto',
        coverflowEffect: {
          rotate: 0,
          stretch: -20,
          depth: 100,
          modifier: 3,
          slideShadows: true,
        },
      },
      list: [
        'https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian/tansuofaxianGroup-1235.png', // 轮播的图片列表，这里是第一张图片路径
        'https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian/tansuofaxianGroup-1237.png', // 轮播的图片列表，这里是第二张图片路径
      ],
      ziti: {
        'https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian/tansuofaxianGroup-1235.png': '江河之秘的古老码头，智慧之光悄然闪烁，\n是历史的低语，还是未来的预兆？\n每一步探索，都伴随着疑问的回响。\n这里到底有多少秘密？',
        'https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian/tansuofaxianGroup-1237.png': '张谷英村呈龙形格局，神秘而独特。\n此地人才辈出，\n传承着古老的智慧与文化，\n散发着浓厚的历史韵味。',
      },
       imageMap: {
      		  	'https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian/tansuofaxianGroup-1235.png': 'https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian/beijing1.png',
      		  	'https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian/tansuofaxianGroup-1237.png': 'https://xnlv.lizxx.com/image/xnlv/static/tansuofaxian/bejing2.png',
      		  },
    };
  },
  methods: {
    onChange(swiper, index) {
      // 当轮播状态发生变化时执行的方法
      if (this.isFirstLoad) {
        // 如果是首次加载
        this.isFirstLoad = false;
        this.wenziqr = true;
      } else {
        this.wenziqr = false;
        this.wenziqr2 = true;
        this.currentImages = this.list[index];
        // 根据当前图片路径获取相应的文字内容
        const currentImagePath2 = this.list[index];
        if (this.ziti[currentImagePath2]) {
          this.textContent2 = this.ziti[currentImagePath2];
        }
        console.log('currentImages 的值为：', this.currentImages);

        // 添加以下逻辑，根据当前图片路径查找关联图片并更新 currentImages
        if (this.imageMap[currentImagePath2]) {
          this.currentImages = this.imageMap[currentImagePath2];
        }
      }
    },
    handleClick() {
      wx.redirectTo({
        url: '/pagesNew/pages-exploration-discovery/Explore the wisdom of village construction/The first page.',
      });
    },
    onTouchStart(event) {
      this.touchStartX = event.touches[0].clientX;
      this.touchStartY = event.touches[0].clientY;
      console.log(`触摸点坐标: (${this.touchStartX}, ${this.touchStartY})`);
    },
    onTouchMove(event) {
      console.log('onTouchMove 正在执行');
      if (this.touchStartY) {
        const currentY = event.touches[0].clientY;
        const diffY = currentY - this.startY;
        const currentX = event.touches[0].clientX;
        console.log(`当前 X 坐标：${currentX}`);
        const tolerance = 10; // 设置一个误差范围，可以根据实际情况调整
        // 判断 X 坐标是否在起始坐标的误差范围内
        if (Math.abs(currentX - this.touchStartX) > tolerance) {
          console.log('X 坐标变化超出误差范围，不进行跳转');
          return;
        }
        if (diffY > this.touchStartY) {
          console.log('正在向下滑动');
          wx.redirectTo({
            url: '/pagesNew/pages-online-cloud/cloud-exhibition-hall/cloud exhibition hall',
          });
          console.log('正在向下跳转');
        } else {
          console.log('正在向上滑动');
          wx.redirectTo({
            url: '/pagesNew/pages-public-welfare/public-welfare-education',
          });
        }
      }
    },
    onTouchEnd() {
      this.isTouching = false;
    },
    tzsy() {
      wx.redirectTo({
        url: '/pagesNew/pages-guide/guide',
      });
    },
    ckgd() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const currentPath = currentPage.route;
      console.log('当前页面路径：', currentPath);
      wx.redirectTo({
        url: `/pagesNew/pages-exploration-discovery/Explore the wisdom of village construction/daolantsfx?fromPage=${currentPath}`,
      });
    },
  },
};
</script>

<style>
.clone {
  z-index: 5;
  position: relative;
  width: 100vw;
  height: 100vh;
  border: 1px solid #fff;
}

.swiper {
  position: absolute;
  z-index: 5;
  margin-top: 35vh;
  /* border: 2px solid red; */
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.image {
  width: 100%;
  /* border: 2px solid pink; */
  font-size: 24rpx;
  font-family: Open Sans;
  text-align: center;
  color: #77827B;
  height: 100%;
}

.image-bai {
  width: 100%;
  /* border: 2px solid pink; */
  font-size: 24rpx;
  font-family: Open Sans;
  text-align: center;
  color: #FFFFFF;
  height: 100%;
}

.background {
  position: absolute;
  z-index: -1;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #E4EBE9;
}

.top-container {
  position: absolute;
  width: 100%;
  height: 50rpx;
  display: flex;
  margin-top: 226rpx;
  /* border: 2px solid pink;//更多和发现一起 */
}

.biaoti {
  width: 158rpx;
  height: 48rpx;
  margin-left: 34rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 32rpx;
  color: #3F5649;
  line-height: 38rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  /* border: 2px solid pink;//发现 */
}

.daohang {
  width: 96rpx;
  height: 36rpx;
  margin-left: 426rpx;
  margin-top: 10rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 24rpx;
  color: #77827B;
  line-height: 28rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  /* border: 2px solid pink;//更多 */
}

.wenzi-swiper {
  position: absolute;
  width: 550rpx;
  height: 150rpx;
  margin-top: 364rpx;
  margin-left: 13%;
  /* border: 2px solid red;//黑白字 */
}

.image-swiper {
  position: absolute;
  z-index: 2;
  height: 732.5rpx;
  width: 100%;
  margin-top: 39vh;
  /* border: 2px solid pink;//大图 */
}

.daohanglogo {
  position: absolute;
  width: 160.31rpx;
  height: 160.31rpx;
  right: 0;
  margin-top: 3.6vh;
  /* border: 2px solid pink;//小圆图 */
  z-index: 2;
  margin-right: 2.1vw;
}

.jianto {
  position: absolute;
  width: 40.01rpx;
  height: 40.01rpx;
  margin-top: 14vh;
  margin-left: 47vw;
  /* border: 2px solid pink;//上 */
}

@keyframes arrowFade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.arrow-fade {
  animation: arrowFade 1.5s infinite;
  /* border: 2px solid pink;//上猾标 */
}

.daohang-image {
  position: absolute;
  z-index: 6;
  width: 100%;
  height: 100%;
}
</style>
